<template>
  <div id="Welcome">
    <el-container class="welcomeBox">
      <!-- header -->
      <el-header>
        <h1 class="logo">
          <a href="#"> 杭州jxw管理系统 </a>
        </h1>
        <el-button class="quit pull-right" @click="handlyQuit">退出</el-button>
      </el-header>
      <el-container>
        <!--aside-->
        <el-aside :class="{ isCollapse: $store.state.welcome.isCollapse }">
          <span class="control-btn" @click="hangleCollapse">| | |</span>
          <el-menu
            :default-active="
              $route.path === '/goods/add' ? '/goods' : $route.path
            "
            @open="handleOpen"
            @close="handleClose"
            :collapse="$store.state.welcome.isCollapse"
            :unique-opened="true"
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF"
            router
            :collapse-transition="false"
          >
            <el-submenu
              :index="v.path"
              v-for="(v, i) in routes"
              :key="i"
              v-show="v.meta.isShow"
            >
              <template slot="title">
                <iconsvg :iconClass="v.meta.icon" :className="v.meta.icon" />
                <span slot="title">{{ v.meta.title }}</span>
              </template>
              <el-menu-item-group>
                <template v-if="v.children">
                  <el-menu-item
                    :index="cv.path"
                    v-for="(cv, ci) in v.children"
                    :key="ci"
                    v-show="!cv.meta.isShow"
                    ><iconsvg
                      iconClass="NMStubiao-"
                      className="NMStubiao-"
                    ></iconsvg
                    >{{ cv.meta.title }}</el-menu-item
                  >
                </template>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!--Main-->
        <el-main>
          <template v-if="$route.path === '/welcome'">
            <div>欢迎登陆杭州jxw后台管理系统！！</div>
          </template>
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import iconsvg from "../../icons/iconsvg.vue";
import { clearUserToken } from "@/utils/handleCookie";
export default {
  components: { iconsvg },
  name: "Welcome",
  data() {
    return {
      //isCollapse: false,
      routes: this.$router.options.routes,
    };
  },
  methods: {
    //展开
    handleOpen(key, keyPath) {
      //console.log(key, keyPath);
      //console.log(this.$router.options)
    },
    //关闭
    handleClose(key, keyPath) {
      //console.log(key, keyPath);
    },
    //控制展开/缩放
    hangleCollapse() {
      this.$store.commit("welcome/CHANGE_ISCOLLAPSE");
    },
    //退出登录
    handlyQuit() {
      console.log("退出");
      clearUserToken();
      this.$router.replace("/login");
    },
  },
};
</script>
<style lang="scss" scoped>
#Welcome {
  height: 100vh;
  .welcomeBox {
    height: 100vh;
  }
  .el-header {
    width: 100vw;
    background-color: #373d41;
    height: $header-h !important;
    line-height: $header-h;
    .logo {
      display: inline-block;
      height: $header-h;
      margin-left: 8px;
      font-size: 25px;
      > a {
        color: #fff;
        font-weight: normal;
        padding-left: 75px;
        height: $header-h;
        display: inline-block;
        background: url("../../assets/img/logo.png") no-repeat left center;
      }
    }
    .quit {
      margin: 1.5vh 0;
    }
  }
  .el-aside {
    height: 100%;
    width: $menu-w !important;
    background-color: $main-bgc;
    overflow: hidden;
    .control-btn {
      height: 40px;
      line-height: 40px;
      background: #666;
      color: #fff;
      display: block;
      width: $menu-w;
      text-align: center;
      cursor: pointer;
    }
    .el-submenu__title span {
      margin-left: 3px;
    }
    .el-submenu__title i {
      fill: #909399;
    }
    .el-menu {
      border: 0;
    }
  }
  .el-aside.isCollapse {
    width: $menu-changeW !important;
    .control-btn {
      width: $menu-changeW;
    }
  }
  .el-main {
    background: $mainThree-bgc;
  }
  ::v-deep .el-menu-item-group__title {
    padding: 0px;
  }
}
</style>
